<template>
  <div class="dashboard-container">
    <div class="setContent">
      <div class="title">企业设置</div>
      <div class="butList">
        <el-input placeholder="请输入" width="100%" size="mini" v-model="keyword" > </el-input><span @click="init()" class="icon">&#xe621;</span>
      </div>
      <div class="cont">
        <div class="tableCont">
          <el-table ref="multipleTable" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="文档名称" width="140" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column prop="updateTime" label="最后编辑" width="160" />
            <el-table-column prop="creator.username" label="作者" />
            <el-table-column prop="fileSize" label="大小" />
            <el-table-column prop="filePath" label="路径" />
            <el-table-column label="封禁状态" center>
              <template slot-scope="scope">
                <span v-if="!scope.row.enable" style="color:rgba(156,0,0,0.73)">封禁</span>
                <span v-if="scope.row.enable" style="color:rgba(7,148,10,0.7)">正常</span>
              </template>
            </el-table-column>
            <el-table-column label="协作者" >
              <template slot-scope="scope">
                <span v-if="scope.row.collaborations.length>0">
                  <span v-for="it in scope.row.collaborations" :key="it.id">{{it.username}}</span>
                </span>
                <span v-if="scope.row.collaborations.length == 0">无</span>
              </template>
            </el-table-column>
            <el-table-column width="160" prop="address" center label="操作">
              <template slot-scope="scope">
                <span class="actLab" @click="openHistory(scope.row)">查看编辑历史</span>
                <span class="actLab" @click="isClose(scope.row)">{{scope.row.enable ? '封禁' : '解封'}}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageList" >
            <el-pagination
              v-if="total > pageSize"
              @current-change="handleSizeChange"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
          <el-dialog
            :title=title
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose">
            <template>
              <el-table :data="historyData" height="350px" style="width: 100%">
                <el-table-column prop="fileName" label="文件名" width="140" show-overflow-tooltip />
                <el-table-column prop="username" label="操作人"  width="90" show-overflow-tooltip />
                <el-table-column prop="ifCreate" label="是否创建文件" width="110" align="center" >
                  <template slot-scope="scope">
                    <span v-if="scope.row.ifCreate">是</span>
                    <span v-if="!scope.row.ifCreate">否</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="更新时间" width="160"  />
                <el-table-column prop="content" label="操作" show-overflow-tooltip />
              </el-table>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
        name: 'Dashboard',
        data() {
            return {
                dialogVisible:false,
                loading:false,
                tableData: [],
                historyData: [],
                title:'历史记录',
                options: [],
                page: 1,
                pageSize: 10,
                keyword:'',
                total: 0,
                adminListData: [],
            }
        },
        computed: {
            ...mapGetters([
                'name'
            ]),
        },
        created(){
            this.init()
        },
        methods: {
            init(){
                this.$store.dispatch('file/getFileListAct',{page: this.page, pageSize: this.pageSize, keyword:this.keyword,}).then((res) => {
                    this.total = res.total
                    this.tableData = res.rows
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            handleSizeChange(val) {
                this.page = val
                this.init()
            },
            openHistory(data){
                this.title = data.name
                this.dialogVisible = true
                this.$store.dispatch('file/getEditLogAct',{id: data.id}).then((res) => {
                    this.historyData = res.rows
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            handleClose(done) {
                done()
            },
            isClose(row){
                this.$confirm(`确认${!row.enable ? '封禁' : '解封'}文档 ${row.name} ？`,'提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(_ => {
                    this.$store.dispatch('file/clsFileAct',{id: row.id, enable: !row.enable}).then((res) => {
                        this.init()
                        this.loading = false
                    }).catch(() => {
                        this.loading = false
                    })
                })
                .catch(_ => {});
            }
        }
    }
</script>
<style lang="scss">
  .setContent {
    .el-table thead th, .el-table thead tr {
      background: #edeffd;
    }

    .pageList {
      text-align: right;
      padding: 10px 0;
      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background: #3345ff;
      border-color: #3345ff;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#606266;
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .setContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .butList{
          width: 300px;
          position: relative;
          padding: 0 20px;
          cursor: pointer;
          font-size: 14px;
          line-height: 50px;
          span{
            position: absolute;
            right: 23px;
          }
        }
        .cont {
          padding:0 20px;
          .tableCont{
            background: #fff;
          }
          .titlab{
            margin: 0 4px;
            font-size: 12px;
            border-radius: 4px;
            padding: 4px 10px;
          }
          .actLab{
            color:#3345ff;
            margin: 0 4px;
            cursor: pointer;
          }
        }
        .itemsLIst{
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;
          .items{
            width: calc(50% - 5px);
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 10px #e6e6e6;
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;
            .lab{
              display: inline-block;
              text-align: center;
              width: 40px;
              height: 40px;
              color:#fff;
              border-radius: 100px;
              font-size: 22px;
              margin-right: 10px;
            }
          }
          .items:nth-child(2n-1){
            margin-right: 10px;
          }
        }
        .tit{
          line-height: 50px;
        }
        .dialog-footer{
          display: flex;
          justify-content: center;
          text-align: center;
        }
      }
    }
  }
</style>
